@import "../../style/public";
.search-wrap {
  width: 100%;
  @include remCalc(height, 104);
  @include remCalc(padding, 16, 30);
  @include thin-border(false, false, bottom);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
  position: relative;
  .form-warp{
    flex: 1;
  }
  .mintui.mintui-search {
    top: 50%;
    @include remCalc(left, 16, !important);
    transform: translateY(-50%);
    color: #d9d9d9;
    @include remCalc(font-size, 28);
    position: absolute;
  }
  .input-wrap {
    background: #f8f8f8;
    flex: 1;
    display: flex;
    height: pw(32);
    position: relative;
    border-radius: pw(32);
    .zhk-sbylx {
      color: #999;
      @include remCalc(font-size, 32);
      @include remCalc(top, 18);
      @include remCalc(right, 14);
      position: absolute;
      background: #fff;
      &::after{
        content: "";
        position: absolute;
        $area:-20;
        @include remCalc(top, $area);
        @include remCalc(bottom, $area);
        @include remCalc(left, $area);
        @include remCalc(right, -10);
      }
    }
    input {
      background: #f8f8f8;
      @include remCalc(font-size, 28);
      flex: 1;
      height: pw(32);
      border-radius:pw(32);
      @include remCalc(padding, 0, 20, 0, 50);
      min-width: 50%;
    }
  }
  .mint-searchbar-cancel{
    @include remCalc(padding, 20, 0);
  }
}
//红色边框样式的搜索框
.search-wrap2 {
  width: 100%;
  @include remCalc(height, 104);
  @include remCalc(padding, 16, 30);
  @include thin-border(false, false, bottom);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
  position: relative;

  .form-warp {
    flex: 1;
  }

  .mintui.mintui-search {
    top: 50%;
    @include remCalc(left, 16, !important);
    transform: translateY(-50%);
    color: #d9d9d9;
    @include remCalc(font-size, 28);
    position: absolute;
  }

  .input-wrap {
    background: #f8f8f8;
    flex: 1;
    height: pw(32);
    display: flex;
    // height: 100%;
    position: relative;
    border-radius: pw(32);
    border: pw(1.5) solid #F40F00;

    input {
      background: #f8f8f8;
      @include remCalc(font-size, 28);
      height: pw(32);
      flex: 1;
      // height: 100%;
      border-radius: pw(32);
      @include remCalc(padding, 0, 20, 0, 50);
      min-width: 50%;
    }
    >div{
      width: pw(60);
      height: pw(28);
      background: linear-gradient(315deg, #FF211A 0%, #FF4C41 72.4%, #FF958F 100%);
      border-radius: pw(28);
      font-size: pw(14);
      font-weight: 400;
      text-align: center;
      line-height: pw(28);
      color: #fff;
      position: absolute;
      top: 50%;
      right: pw(2);
      margin-top: pw(-14);
    }
  }
}